<?php require("front_view_nav_nocheck.php"); ?>
<?php
if ( !isset(SysConfig::$ALLOW_REGISTER) || !SysConfig::$ALLOW_REGISTER ) {
    echo '系统当前不允许注册新用户，请加群(531912864)咨询!';
    exit(0);
}
?>
<div class="col-lg-offset-1 col-lg-10 col-sm-12 col-xs-12" id="register_user">
    <div class="panel panel-default" style="margin-left: -1.3rem; margin-right: -1.3rem;">
        <div class="panel-body">
            <div v-show="isshow_mail" class="col-lg-12 col-xs-12 col-sm-12">
                <div style="min-height: 2rem;" class="form-group col-sm-4">
                    <span style="color: green">注册成功</span>
                    <span style="color: green"><a v-bind:href="mail_url">点此前往邮箱激活</a></span>
                </div>
            </div>
            <div v-show="isshow_register" class="col-lg-12 col-xs-12 col-sm-12">
                <form @submit.prevent="registerUser()" class="col-lg-9 col-sm-12">
                    <div style="min-height: 2rem;" class="form-group col-sm-4">
                        <span style="color: red">{{err_tips}}</span>
                    </div>
                    <div class="form-group col-sm-12">
                        <label class="col-sm-2 control-label">登录用户名:</label>
                        <div class="col-sm-8">
                            <input v-model="userInfo.id" class="form-control" placeholder="名字拼音首字母,如:wxe" type="text">
                        </div>
                    </div>
                    <div class="form-group col-sm-12">
                        <label class="col-sm-2 control-label">邮箱:</label>
                        <div class="col-sm-8">
                            <input v-model="userInfo.email" class="form-control" placeholder="请输入邮箱" type="text">
                        </div>
                    </div>
                    <div class="form-group col-sm-12">
                        <label class="col-sm-2 control-label">姓名:</label>
                        <div class="col-sm-8">
                            <input v-model="userInfo.name" class="form-control" placeholder="请输入姓名" type="text">
                        </div>
                    </div>
                    <div class="form-group col-sm-12">
                        <label class="col-sm-2 control-label">学校:</label>
                        <div class="col-sm-8">
                            <input v-model="userInfo.school" class="form-control" placeholder="请输入所在学校" type="text">
                        </div>
                    </div>
                    <div class="form-group col-sm-12">
                        <label class="col-sm-2 control-label">验证码:</label>
                        <div class="col-sm-2">
                            <img v-bind:src="vcode_url" @click="refreshVcode" alt="点击刷新">
                        </div>
                        <div class="col-sm-5">
                            <input v-model="vcode_txt" class="form-control" placeholder="请输入验证码" type="text">
                        </div>
                    </div>
                    <div class="form-group col-sm-12">
                        <div class="col-sm-offset-2 col-sm-10">
                            <div class="col-sm-4">
                                <button type="submit" class="form-control btn btn-default" >提交</button>
                            </div>
                            <div class="col-sm-4">
                                <button @click="resetForm" type="reset" class="form-control btn btn-default" >重置</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
    var app = new Vue({
        el: "#register_user",
        data:{
            userInfo: {
                id:"",
                name:"",
                school:"",
                email:"",
            },
            vcode_txt:"",
            vcode_url:"",
            err_tips:"",
            isshow_register:true,
            isshow_mail:false,
            mail_url:""
        },

        mounted:function () {
            this.refreshVcode()
        },

        methods:{
            refreshVcode:function () {
                // 添加随机参数，避免浏览器缓存
                this.vcode_url = "../../vcode.php?" +Math.random()
            },
            resetForm:function () {
                this.userInfo.id=""
                this.userInfo.name=""
                this.userInfo.school=""
                this.userInfo.email=""
                this.err_tips = ""
                this.vcode_txt=""
                this.vcode_url = "../../vcode.php?" +Math.random()
            },
            registerUser:function() {
                this.err_tips = ""
                if ( this.userInfo.id == "" ) {
                    this.err_tips = '用户名不能为空'
                    return;
                }
                let reg = new RegExp(/^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/)
                if ( !reg.test(this.userInfo.email) ) {
                    this.err_tips = '请输入有效的邮箱'
                    return;
                }
                if ( this.userInfo.name == "" ) {
                    this.err_tips = '姓名不能为空'
                    return;
                }
                if ( this.userInfo.school == "" ) {
                    this.err_tips = '所在学校不能为空'
                    return;
                }
                if ( this.vcode_txt == "" ) {
                    this.err_tips = '验证码不能为空'
                    return;
                }
                let mailUrl = this.userInfo.email
                mailUrl = mailUrl.substr(mailUrl.indexOf('@')+1)
                mailUrl = 'https://mail.'+mailUrl
                this.mail_url = mailUrl
                this.isshow_mail = true
                this.isshow_register = false
            },
            addUser:function () {
                let reqData = this.userInfo;
                reqData.op = "add";
                let param = "para="+JSON.stringify(reqData);
                new Promise(function(resolve, reject) {
                    $.ajax({
                        type:'post',
                        url:'../model/user_router.php',
                        data:param,
                        dataType:'json',
                        success:function (retData) {
                            if ( retData.status ) {
                                resolve();
                            }
                            else {
                                reject(retData.msg);
                            }
                        }
                    });

                }).then(function() {
                    // 显示提示框
                    app.isShowAddDlg = true;
                }).catch(function(errMsg) {
                    alert('添加用户用户信息失败:'+errMsg);
                });
            },
        }
    });
</script>
</body>
</html>
